<template>
  <div>
    <van-nav-bar
      :title="title"
      :left-arrow="isArrow"
      :style="'backgroundColor:'+backColor"
      @click-left="$router.back()"
    >
      <template slot="right">
        <div style="display: flex;width: 70px;border: 1px solid #ccc;border-radius: 20px;height: 20px;line-height: 20px;">
          <van-icon name="more-o" />
          <span style="vertical-align: middle;width: 1px;height: 15px;background-color: #ccc;margin-top: 2.5px;"></span>
          <van-icon name="close"/>
        </div>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {

    }
  },
  props: {
    title: String || '首页',
    backColor: String || 'white',
    isArrow: Boolean
  }
}
</script>

<style scoped>
.van-nav-bar .van-icon {
  flex-grow: 1;font-size: 15px;display: flex;justify-content: center;align-items: center;
  color: black;
  font-weight: 700;
}
</style>
